<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="../../vue文件/vue.js"></script>

</head>
<body>
    <!-- v-cloak:解决插值闪烁问题 -->
    <div id="app">
        <p v-cloak>这是从vue对象里获取的数据：{{msg}}</p>
        <p v-text="msg">这是从vue对象里获取的数据：</p>
        <p v-html="msg2">这是从vue对象里获取的数据：</p>
    </div>
    <!-- v-cloak 和 v-text 都可以解决闪烁问题 但是v-text在标签内写入的内容不会被渲染 -->
    <!-- v-html可以渲染HTML标签 -->
</body>
<script>
      new Vue ({
        el:"#app",
        data:{
            msg:"v-cloak是用来解决常见的一个问题",
            msg2:"<h1>你好HTML</h1>"
        },
    });
</script>
<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>
</html>